﻿<html>
<head>
	<title>MoteJS Demo Page</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<link rel="stylesheet" type="text/css" href="styles.css"/>
	<script type="text/javascript" src="lib/html.js"></script>
	<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="lib/raphael-min.js"></script>
	<script type="text/javascript" src="mote.js"></script>
	<script type="text/javascript">
		$(function(){
			$("h1").after(Html.div({style:"font-style:italic; color:#ccc;"}, "Powered by MoteJS v.", Mote.version));
			
			var world = Mote.world($("#screen"), function(world, screen){
				var ground = world.gravity.groundPosition;
				var width = screen.width;
				screen.rect(0, 0, screen.width, ground).attr({fill:"90-#eef-#cde", "stroke-width":0});
				screen.rect(0, ground, screen.width, screen.height-ground).attr({fill:"90-#8a4-#aba", "stroke-width":0});
				screen.path(["M0,",ground,"L",width,",",ground]);
			});
			
			world.add(Mote.solid([25, 85], 10, function(screen, pos){
				var set = screen.set();
				set.push(
					screen.rect(pos.x, pos.y, 15, 25).attr({fill:"#fcc", stroke:"#855"}),
					screen.rect(pos.x+5, pos.y+5, 8, 8).attr({fill:"#ccf", stroke:"#558"}),
					screen.circle(pos.x+5, pos.y+10, 5, 5).attr({fill:"#f00", stroke:"#800"})
				);
				return set;
			})).fall();
			
			world.add(Mote.solid([65, 85], 5, function(screen, pos){
				return screen.rect(pos.x, pos.y, 20, 20).attr({fill:"#ffc", stroke:"#558"});
			})).fall();
			
			world.add(Mote.solid([125, world.gravity.groundPosition], 50, function(screen, pos){
				var size = 50;
				return screen.rect(pos.x, pos.y-size, size, size).attr({fill:"#ccc", stroke:"#888"});
			}).static());
			
			world.add(Mote.solid([225, 85], 8, function(screen, pos){
				var d = 10;
				return screen.circle(pos.x+d, pos.y+d, d).attr({fill:"#faa", stroke:"#8cc"});
			})).fall();
			
		});
	</script>
</head>
<body>
	<h1>MoteJS Demo Page</h1>
	<div id="screen" style="border:1px solid #ccc; margin:5px; width:900px; height:500px;"></div>
</body>
</html>